import React, { useEffect, useState } from "react";
import { Spin } from "antd";
import Home from "../../views/sandbox/home/Home";
import UserList from "../../views/sandbox/user-manage/UserList";
import RightList from "../../views/sandbox/right-manage/RightList";
import RoleList from "../../views/sandbox/right-manage/RoleList";
import NewsAdd from "../../views/sandbox/news-manage/NewsAdd";
import NewsDraft from "../../views/sandbox/news-manage/NewsDraft";
import NewsPreview from "../../views/sandbox/news-manage/NewsPreview";
import NewsUpdate from "../../views/sandbox/news-manage/NewsUpdate";
import NewsCategory from "../../views/sandbox/news-manage/NewsCategory";
import Audit from "../../views/sandbox/audit-manage/Audit";
import AuditList from "../../views/sandbox/audit-manage/AuditList";
import Unpublished from "../../views/sandbox/publish-manage/Unpublished";
import Sunset from "../../views/sandbox/publish-manage/Sunset";
import Published from "../../views/sandbox/publish-manage/Published";
import NoPermission from "../../views/sandbox/nopermission/NoPermission";
import { Routes, Route, Navigate } from "react-router-dom";
import axios from "axios";
import { connect } from "react-redux";
const LocalRouterMap = {
  "/home": <Home />,
  "/user-manage/list": <UserList />,
  "/right-manage/role/list": <RoleList />,
  "/right-manage/right/list": <RightList />,
  "/news-manage/add": <NewsAdd />,
  "/news-manage/draft": <NewsDraft />,
  "/news-manage/category": <NewsCategory />,
  "/news-manage/preview/:id": <NewsPreview />,
  "/news-manage/update/:id": <NewsUpdate />,
  "/audit-manage/audit": <Audit />,
  "/audit-manage/list": <AuditList />,
  "/publish-manage/unpublished": <Unpublished />,
  "/publish-manage/published": <Published />,
  "/publish-manage/sunset": <Sunset />,
};
const mapStateToProps = ({ LoadingReducer: { isLoading } }) => {
  return {
    isLoading,
  };
};
export default connect(mapStateToProps)(function NewsRouter(props) {
  const [BackRouterList, setBackRouterList] = useState([]);
  useEffect(() => {
    Promise.all([axios.get("/rights"), axios.get("/children")]).then((res) => {
      setBackRouterList([...res[0].data, ...res[1].data]);
    });
  }, []);
  const {
    role: { rights },
  } = JSON.parse(localStorage.getItem("token"));
  const checkRouter = (item) => {
    return (
      LocalRouterMap[item.key] && (item.pagepermisson || item.routepermisson)
    );
  };
  const checkUserPermission = (item) => {
    return rights.includes(item.key);
  };
  return (
    <Spin size="large" spinning={props.isLoading}>
      <Routes>
        {/* <Route path="/home" element={<Home />} />
      <Route path="/user-manage/list" element={<UserList />} />
      <Route path="/right-manage/role/list" element={<RoleList />} />
      <Route path="/right-manage/right/list" element={<RightList />} /> */}
        {BackRouterList.map((item) => {
          if (checkRouter(item) && checkUserPermission(item)) {
            return (
              <Route
                path={item.key}
                key={item.key}
                element={LocalRouterMap[item.key]}
              />
            );
          }
          return false;
          // return <Route element={<NoPermission key={item.key} />} />;
        })}
        <Route path="/" element={<Navigate replace from="/" to="home" />} />
        {/* <Route path="/*" element={<NoPermission />} /> */}
        {BackRouterList.length > 0 && (
          <Route path="/*" element={<NoPermission />} />
        )}
      </Routes>
    </Spin>
  );
});
